<template>
  <div class="xtx-goods-page" >
    <div class="container" v-if="goodData && goodData.brand">
      <!-- 商品信息 -->
      <div class="goods-info">
        <div class="media">
          <!-- 图片预览区 -->
          <XtxImageView :image-list="goodData.mainPictures" />
          <!-- 统计数量 -->
          <good-sale :good="goodData"/>
        </div>
        <div class="spec">
          <!-- 商品信息区 -->
          <good-info :good="goodData" />
          <!-- sku组件 -->
           <XtxGoodSku :goods="goodData" @change="skuChange"/>
          <!-- 数据组件 -->
          <CheckNumber :min="1" :max="99" v-model="numb"/>
          <!-- 按钮组件 -->
          <XtxButton type="primary" style="margin-top: 20px" @click="insertCart"
            >加入购物车</XtxButton
          >
        </div>
      </div>
      <div class="goods-footer">
        <div class="goods-article">
          <!-- 商品详情 -->
          <goods-detail :good="goodData"/>
        </div>
        <!-- 24热榜+专题推荐 -->
        <div class="goods-aside">
          <goods-hot :type="1"></goods-hot>
          <goods-hot :type="2"></goods-hot>
          <goods-hot :type="3"></goods-hot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入vue
import { ref } from 'vue'
// 导入路由实例
import { useRoute, useRouter } from 'vue-router'
// 导入vuex
import { useStore } from 'vuex'
// 导入API
import { findGoods } from '@/api/goods.js'
// 导入组件
import GoodSale from './components/good-sale.vue'
import GoodInfo from './components/goods-info.vue'
import GoodsDetail from './components/good-detail.vue'
import GoodsHot from './components/good-hot.vue'
// 导入Message
import Message from '@/components/Message/index.js'
export default {
  components: {
    GoodSale,
    GoodInfo,
    GoodsDetail,
    GoodsHot
  },
  setup () {
    const goodData = ref({})
    const route = useRoute()
    // 获取商品详情
    async function getGoodsData () {
      const res = await findGoods(route.params.id)
      goodData.value = res.data.result
    }
    getGoodsData()

    // sku
    let skuObj = {}
    function skuChange (sku) {
      console.log(sku)
      skuObj = sku
    }

    // 加入购物车
    const numb = ref(1)
    const store = useStore()
    const router = useRouter()
    async function insertCart () {
      // 判断是否选中商品规格
      if (!skuObj.skuId) {
        return Message({ text: '请选择商品颜色/规格', type: 'error' })
      }
      // 判断当前是否登录
      const token = store.state.user.profile.token
      if (!token) {
        // 没token，表示未登录，点击购物车跳转登录页面
        Message({ type: 'error', text: '请先登录' })
        router.push({
          path: '/login',
          query: {
            redirect: encodeURIComponent(route.fullPath)
          }
        })
      } else {
        // 登录状态 调用vuex接口
        await store.dispatch('cart/asyncInsertCart', { skuId: skuObj.skuId, count: numb.value })
        // 提示用户
        Message({ text: '加入购物成功', type: 'success' })
      }
    }

    return { goodData, skuObj, numb, skuChange, insertCart }
  }
}
</script>

<style scoped lang='less'>
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}
.goods-footer {
  display: flex;
  margin-top: 20px;
  .goods-article {
    width: 940px;
    margin-right: 20px;
  }
  .goods-aside {
    width: 280px;
    min-height: 1000px;
  }
}
.goods-tabs {
  min-height: 600px;
  background: #fff;
}
.goods-warn {
  min-height: 600px;
  background: #fff;
  margin-top: 20px;
}

.number-box{
  display: flex;
  align-items: center;
.label {
    width: 60px;
    color: #999;
    padding-left: 10px;
  }
}

</style>
